<template>
<view class="my-order">
  <view class="nav-container">
    <!-- 导航栏状态切换 -->
    <view class="status-tabs">
      <view 
        v-for="tab in tabs" 
        :key="tab.name" 
        :class="{ 'active-tab': currentTab.name === tab.name }"
        @click="switchTab(tab)"
      >
        <text class="tab-label">{{ tab.label }}</text>
      </view>
    </view>
  </view>

  <!-- 订单详情内容区域 -->
  <view class="order-details" v-for="item in orderInfo">
	  <view class="order-list" v-show="currentTab.label==item.order_status||currentTab.label=='全部'">
		  <view class="order-item" >
		  	<view class="order-no" 
			@click="navTo(
					'/packageMy/OrderInfo/OrderInfo',
					{
				        // 传递的数据
						id:item.order_number,
						status:item.order_status
					})"
			>
		  		<text>订单编号：{{ item.order_number}}</text>
		  		<text>></text>
		  	</view>
		  	<view class="service-name">
		  		<text>服务项目：{{ item.service_item }}</text>
		  	</view>
		  	<view class="store-name">
		  		<text>服务门店：{{ item.service_store }}</text>
				<view style="margin-left: 10px;">✈</view>
		  	</view>
		  	<view class="order-time">
		  		<text>下单时间：{{ item.order_time }}</text>
		  	</view>
		  	
		  	<!-- 多个class样式使用[] -->
		  	<text :class="['order-status',getStatus(item.order_status)]">{{item.order_status}}</text>
		  	<view class="footer">
		  		<view class="total-price">
		  			<text>实付：{{ item.actual_payment }}元</text>
		  		</view>
		  	<!-- 底部操作按钮 -->
		  		<view class="action-buttons">
					
					<!-- 左边按钮 -->
		  			<text class="evaluate-btn left-btn" 
					@click= "navTo(
					'/packageMy/OrderEvaluate/OrderEvaluate',
					{
				        // 传递的数据
						id:item.order_number
					})"
					v-show="item.order_status=='待评价'">
					立即评价
					</text>
					<text class="cancel-btn left-btn" @click="handleAction(item, 'cancel')" 
					v-show="item.order_status=='待支付'">
					取消订单
					</text>
					<text class="refund-btn left-btn" @click="handleAction(item, 'refund')"
					v-show="item.order_status=='待使用'">
					申请退款
					</text>
					
					<!-- 右边按钮 -->
					<text class="repeat-btn right-btn" 
					v-show="item.order_status=='待评价'
					||item.order_status=='已取消'
					||item.order_status=='已退款'
					||item.order_status=='已完成'"
					>
					再来一单
					</text>
					<text class="code-btn right-btn"
					v-show="item.order_status=='待使用'"
					@click="handleAction(item, 'code')"
					>
					扫码结算
					</text>
					<text class="pay-btn right-btn" 
					v-show="item.order_status=='待支付'"
					@click="handleAction(item, 'paying')"
					>
					立即支付
					</text>
		  		</view>
		  	</view>
		  	
		  </view>
		  
		  
	  </view>

  </view>
</view>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute } from 'vue-router';
import { onLoad } from '@dcloudio/uni-app'; // 引入 uni-app 的 onLoad 钩子

// 导航栏状态配置
const tabs = [
  { name: 'all', label: '全部' },
  { name: 'pending_payment', label: '待支付' },
  { name: 'pending_use', label: '待使用' },
  { name: 'pending_review', label: '待评价' }
];

const route = useRoute();
const currentTab = ref(tabs[0]); // 默认显示全部订单

// 订单详情数据
const orderInfo=ref(
[
  {
    order_number: "24255252522",
    service_item: "车辆保养",
    service_store: "大宝车辆维修店",
    order_time: "2022-10-20 12:09",
    actual_payment: 200,
    order_status: "已取消",
    action_button: ["再来一单"]
  },
  {
    order_number: "24255252523",
    service_item: "车辆保养",
    service_store: "大宝车辆维修店",
    order_time: "2022-10-21 14:15",
    actual_payment: 200,
    order_status: "待支付",
    action_button: ["立即评价", "再来一单"]
  },
  {
    order_number: "24255252524",
    service_item: "车辆保养",
    service_store: "大宝车辆维修店",
    order_time: "2022-10-22 09:30",
    actual_payment: 200,
    order_status: "待使用",
    action_button: ["再来一单"]
  },
  {
    order_number: "24255252525",
    service_item: "车辆保养",
    service_store: "大宝车辆维修店",
    order_time: "2022-10-23 16:45",
    actual_payment: 200,
    order_status: "待评价",
    action_button: ["立即评价", "再来一单"]
  },
  {
    order_number: "24255252526",
    service_item: "车辆保养",
    service_store: "大宝车辆维修店",
    order_time: "2022-10-24 11:20",
    actual_payment: 200,
    order_status: "已完成",
    action_button: ["再来一单"]
  }
]
)

// 弹窗配置对象
const modalConfig = {
	  confirmButtonText: '确定',
	  cancelButtonText: '取消',
	  content: ''
	};

// 导航栏切换事件
function switchTab(tab) {
  currentTab.value = tab;
  // 根据状态筛选订单（实际需调用API）
  console.log(`切换到${tab.name}状态`);
}

// 返回上一页
function goBack() {
  uni.navigateBack({
    delta: 1
  });
}

//判断订单状态样式
function getStatus(status){
	if(status=="已取消"){
		return 'status1'
	}
	else if(status=='待支付'){
		return 'status2'
	}
	else if(status=='待使用'){
		return 'status3'
	}
	else if(status=='待评价'){
		return 'status4'
	}
	else if(status=='已退款'){
		return 'status5'
	}
	else if(status=='已完成'){
		return 'status6'
	}
}

//导航跳转
function navTo(path,obj){
		uni.navigateTo({
			url:path,
			success:function(res){
				 // 通过eventChannel向被打开页面传送数据
					res.eventChannel.emit('orderInfo', obj)
			}
		})
}



function handleAction(item, type) {
	
  // 根据操作类型动态设置弹窗内容
  switch (type) {
    case 'cancel':
      modalConfig.content = `确定要取消订单吗？`;
      break;
    case 'refund':
      modalConfig.content = `确定申请退款吗？`;
      break;
	case 'code':
	  modalConfig.content = `这里放二维码组件`;
  }

  // 显示弹窗
  uni.showModal({
    ...modalConfig,
    success: (res) => {
      if (res.confirm) {
        console.log(`执行${type}操作`, item);
        // 调用对应接口
        if (type === 'cancel') cancelOrder(item);
        if (type === 'refund') refundOrder(item);
		if(type === 'code') codeOrder(item);
		if(type === 'paying') payingOrder(item);
		}
	}
	});
}


	// 取消订单接口调用
	function cancelOrder(item) {
	  uni.showToast({ title: '取消成功' });
	  // 实际需调用 API
	  // api.cancelOrder(item.order_id).then(() => {
	  //  刷新订单列表
	  // });
	}
	
	// 退款订单接口调用
	function refundOrder(item) {
	  uni.showToast({ title: '退款提交成功' });
	  // 实际需调用 API 并处理文本框输入内容
	}
	
	onLoad(()=> {
				// 获取上一个页面传过来的数据
				const pages = getCurrentPages();  // 无需import
				const page = pages[pages.length - 1];
				const eventChannel = page.getOpenerEventChannel();
				eventChannel.on('status', (data) => {
					console.log(tabs[data]);
					currentTab.value=tabs[data];
				})
			})

</script>

<style lang="scss">
@import "../../uni.scss";
.my-order{
  padding: 20px;
  background-color: #fff;
  border-bottom: 2px solid #eee;
}

// 导航栏
.nav-container {
	width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.status-tabs{
	width: 100%;
	
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: space-between;
}
.status-tabs>view{
	padding: 15px;
}

.status-tabs {
  display: flex;
  gap: 20px;
  // 导航栏字号
  .tab-label {
    font-size: 14px;
  }
  //点击切换样式
  .active-tab {
    color: #0084ff;
    border-bottom: 2px solid #0084ff;
  }
}

// 订单列表详情
.order-details {
  margin-top: 20px;
  
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

// 订单列表模块
.order-item>view{
	
	width: 100%;
}
.order-item {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
  .order-no {
	  display: flex;
	  justify-content: space-between;
    font-size: 18px;
    color: #333;
    font-weight: bold;
  }
  .order-no :hover{
  	cursor: pointer;
  }
  .service-name {
    font-size: 16px;
    margin-top: 10px;
  }
  .store-name {
    font-size: 14px;
    margin-top: 5px;
	display: flex;
	flex-wrap: nowrap;
  }
  .order-time {
    font-size: 14px;
    margin-top: 5px;
  }
  //实付金额
  .total-price {
    font-size: 16px;
    color: #ff383b;
    font-weight: bold;
    margin-top: 10px;
  }
  //订单状态
  .order-status{
	  position: absolute;
	  right: 5%;
	  top:40%; 
  }
  .status1{//已取消
	  color: #999;
  }
  .status2{//待支付
	  color: #ff383b;
  }
  .status3{//待使用
	  color: #0084ff;
  }
  .status4{//待评价
	  color: #ffaa00;
  }
  .status5{//已退款
	  color: #aa00ff;
  }
  .status6{//已完成
	  color: #00ff00;
  }
}

// 底部按钮
.footer{
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	
	text-align: center;
	margin: 10px 0;
}

.action-buttons {
	position: absolute;
	right: 0;
	font-size: 16px;
	margin-top: 20px;
  .left-btn {
    color:#0084ff;
    border: 1px solid #0084ff;
  }
  .right-btn {
    color: #fff;
	background-color: #0084ff
  }
}
.action-buttons>text{
	margin-left: 10px;
	border-radius: 4px;
	padding: 5px 5px;
}
</style>